<template>

  <div>
    <el-dialog ref="dialog" v-model="visible" :title="title">
      <div class="dialogContent">
        <slot name="main"> </slot>
      </div>
      <div class="dialogFooter">
        <slot name="foot">
          <el-button @click=" close(); cancel();">取消</el-button>
          <el-button type="primary" @click="close();confirm();">确定</el-button>
        </slot>
      </div>
    </el-dialog>
  </div>
  
</template>
<script lang="ts">
import { ref, reactive } from "vue";
import { defineComponent } from "vue";

export default defineComponent({
  props: {
    title: {
      type: String,
      default: "提示信息",
    },
    cancel: {
      type: Function,
      default: () => {
        console.log("cancel");
      },
    },
    confirm: {
      type: Function,
      default: () => {
        console.log("confirm");
      },
    },
  },
  setup() {
    const visible = ref<boolean>(false);
    const open = () => {
      visible.value = true;
    };
    const close = () => {
      visible.value = false;
    };
    return {
      visible,
      open,
      close,
    };
  },
});
</script>

<style scoped>
.inName {
  width: 300px;
}
.searchBtn {
  margin-left: 10px;
}
.bulk {
  width: 150px;
}
.footer {
  overflow: hidden;
  margin-top: 20px;
}
.fen {
  float: right;
}
.tableList {
  margin-top: 20px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.addN {
  width: 240px;
}
</style>
